<template>
  <div class="dropdown">
    <button class="flex items-center py-2 px-2 text-gray-800 md:mx-2">
      <div v-if="title">{{ title }}</div>
      <slot name="header" />
      <svg
        v-if="items.length > 0"
        class="fill-current h-4 w-4"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
      >
        <path
          d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
        />
      </svg>
    </button>
    <ul
      v-if="items.length > 0"
      class="dropdown-content absolute hidden border text-sm py-1 rounded-lg bg-white shadow-lg"
    >
      <li v-for="(item, i) in items" :key="i">
        <a
          class="hover:bg-gray-900 hover:text-white py-1 px-4 block whitespace-no-wrap"
          @click="clickHandler(item)"
          >{{ item.title }}</a
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: null,
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    clickHandler(item) {
      if (item.href) {
        location.href = item.href;
        return;
      }
      this.$emit("active", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.dropdown:hover > .dropdown-content {
  display: block;
}
</style>
